<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>直播间--幻灯片</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/css/swiper.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../css/livestu.css">
</head>
<body>
<div class="mui-content liveroom-content">
    <div class="liveroom-top">
        <div class="swiper-container liveroom-swiper bg-black liveroom_stop">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="http://img3.imgtn.bdimg.com/it/u=2737736307,4093739458&fm=27&gp=0.jpg"
                data-preview-src="http://img3.imgtn.bdimg.com/it/u=2737736307,4093739458&fm=27&gp=0.jpg"
                data-preview-group="1"></div>
                <div class="swiper-slide"><img src="http://img5.imgtn.bdimg.com/it/u=325753512,3109487519&fm=27&gp=0.jpg"
                data-preview-src="http://img5.imgtn.bdimg.com/it/u=325753512,3109487519&fm=27&gp=0.jpg"
                data-preview-group="1"></div>
                <div class="swiper-slide"><img src="http://img5.imgtn.bdimg.com/it/u=3424931798,3301935307&fm=27&gp=0.jpg"
                data-preview-src="http://img5.imgtn.bdimg.com/it/u=3424931798,3301935307&fm=27&gp=0.jpg"
                data-preview-group="1"></div>
                <div class="swiper-slide"><img src="http://img2.imgtn.bdimg.com/it/u=1986475150,1656264718&fm=27&gp=0.jpg"
                data-preview-src="http://img2.imgtn.bdimg.com/it/u=1986475150,1656264718&fm=27&gp=0.jpg"
                data-preview-group="1"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="liveroom-name mui-text-center bg-whtie rel">
            <div class="name-left abs">
                <img src="../images/touxiang.jpg" class="img-circle">
                <a href="javascript:void(0);" class="follow" title="">关注</a>
            </div>
            <div class="name-right abs">
                <p id="topShow">收起</p>
            </div>
            <p class="text-15 color-666">直播间名称名字名字名字</p>
            <p class="color-999 text-mini">3200人次 <span class="color-green">&bull; 即将开始</span></p>
        </div>
    </div>
    <div class="liveroom-main">
        <div class="room-title bg-whtie m-t">
            <h4 class="text-16">像学霸一样记单词——一天记完所有单词</h4>
            <p class="m-t-sm">距直播开始：<span class="color-main">20天19时5分30秒</span></p>
            <p class="m-t-md" style="display: none;">本次直播于2017-07-19 20:00:00开始</p>
            <p class="r_remind m-t-md color-333 text-15">设置开课提醒</p>
            <p class="r_remind m-t-md color-999 text-15" style="display: none;">开课前，将通知你！</p>
        </div>
        <div class="room-tips text-13 m-t-md">
            <p class="text-15">听课指南：</p>
            <p>1.听不到声音请往下翻，点击语音即可播放，并确认手机没有静音。</p>
            <p>2.课程语音永久保留，无限复听。</p>
            <p>3.遇到卡顿和加载不出，点返回，重新进入即可</p>
        </div>
        <div class="chat-list">
            <div class="chat-item">
                <div class="chat-img m-r">
                    <img src="../images/touxiang.jpg" class="img-circle">
                    <p class="shang tip_btn">赏</p>
                </div>
                <div class="chat-con">
                    <div class="chat-card bg-whtie">
                        <p class="color-333 text-15"><img src="../images/touxiang.jpg"> 直播间名称</p>
                        <p><span class="text-mini color-666">直播间名片</span><span class="mui-pull-right follow-btn follow"><i class="iconfont icon-add"></i> 关注</span></p>
                    </div>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item">
                <div class="chat-img m-r">
                    <img src="../images/touxiang.jpg" class="img-circle">
                    <p class="shang tip_btn">赏</p>
                </div>
                <div class="chat-con">
                    <p class="color-333">直播讲师 <span class="color-666 text-mini">特邀嘉宾</span></p>
                    <p class="chat-text m-t-sm m-b-sm">如果想让对本次分享感兴趣的朋友亲人来参加，可以点击右上角带箭头的按钮分享给他们哦！</p>
                    <p class="text-mini zan-p"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item">
                <div class="chat-img m-r">
                    <img src="../images/touxiang.jpg" class="img-circle">
                    <p class="shang tip_btn">赏</p>
                </div>
                <div class="chat-con">
                    <p class="color-333">直播讲师 <span class="color-666 text-mini">特邀嘉宾</span></p>
                    <p class="chat-text chat-audio m-t-sm m-b-sm">
                        <span class="iconfont icon-bofang"></span>
                        <span class="a_line" style="width: 120px;"><i style="width: 0%;"></i></span>
                        <span>60"</span>
                    </p>
                    <p class="text-mini zan-p"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item">
                <div class="chat-img m-r">
                    <img src="../images/touxiang.jpg" class="img-circle">
                    <p class="shang tip_btn">赏</p>
                </div>
                <div class="chat-con">
                    <p class="color-333">直播讲师 <span class="color-666 text-mini">特邀嘉宾</span></p>
                    <p class="chat-text chat-audio m-t-sm m-b-sm">
                        <span class="iconfont icon-bofang"></span>
                        <span class="a_line" style="width:60px;"><i style="width: 80%;"></i></span>
                        <span>30"</span>
                    </p>
                    <p class="text-mini zan-p"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item chat-item-r">
                <div class="chat-img m-l">
                    <img src="../images/touxiang.jpg" class="img-circle">
                </div>
                <div class="chat-con">
                    <p class="color-333 mui-text-right">xuessheng</p>
                    <p class="chat-text m-t-sm m-b-sm">如果想让对本</p>
                    <p class="text-mini zan-p mui-text-right"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item chat-item-r">
                <div class="chat-img m-l">
                    <img src="../images/touxiang.jpg" class="img-circle">
                </div>
                <div class="chat-con">
                    <p class="color-333 mui-text-right">xuessheng</p>
                    <p class="chat-text m-t-sm m-b-sm">如果想让对本次分享感兴趣的朋友亲人来参加，可以点击右上角带箭头的按钮分享给他们哦！</p>
                    <p class="text-mini zan-p mui-text-right"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item">
                <div class="chat-img m-r">
                    <img src="../images/touxiang.jpg" class="img-circle">
                    <p class="shang tip_btn">赏</p>
                </div>
                <div class="chat-con">
                    <p class="color-333">直播讲师 <span class="color-666 text-mini">特邀嘉宾</span></p>
                    <p class="chat-text-img m-t-sm m-b-sm"><img src="http://img3.imgtn.bdimg.com/it/u=3858389895,1750178212&fm=27&gp=0.jpg"
                data-preview-src="http://img3.imgtn.bdimg.com/it/u=3858389895,1750178212&fm=27&gp=0.jpg"
                data-preview-group="2"></p>
                    <p class="text-mini zan-p"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item">
                <div class="chat-img m-r">
                    <img src="../images/touxiang.jpg" class="img-circle">
                    <p class="shang tip_btn">赏</p>
                </div>
                <div class="chat-con">
                    <p class="color-333">直播讲师 <span class="color-666 text-mini">特邀嘉宾</span><span class="color-blue text-mini m-l">回复:橡木</span></p>
                    <div class="chat-text m-t-sm m-b-sm">
                        <p class="p-b-sm"><span class="color-333">橡木：</span>是在这里听课么？我怎么什么都听不见啊？</p>
                        <p class="m-t-sm"><span class="color-333">回复：</span>您好，查看一下是不是手机关静音了呢？</p>
                    </div>
                    <p class="text-mini zan-p"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item">
                <div class="chat-img m-r">
                    <img src="../images/touxiang.jpg" class="img-circle">
                    <p class="shang tip_btn">赏</p>
                </div>
                <div class="chat-con">
                    <p class="color-333">直播讲师 <span class="color-666 text-mini">特邀嘉宾</span></p>
                    <p class="chat-text-img m-t-sm m-b-sm"><img src="http://img1.imgtn.bdimg.com/it/u=2609960718,3327286517&fm=27&gp=0.jpg"
                data-preview-src="http://img1.imgtn.bdimg.com/it/u=2609960718,3327286517&fm=27&gp=0.jpg"
                data-preview-group="3"></p>
                    <p class="text-mini zan-p"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
            <div class="chat-time text-mini color-999 m-t-sm m-b mui-text-center">10-09 18:00</div>
            <div class="chat-item chat-item-r">
                <div class="chat-img m-l">
                    <img src="../images/touxiang.jpg" class="img-circle">
                </div>
                <div class="chat-con">
                    <p class="color-333 mui-text-right">学生用户</p>
                    <p class="chat-text-img m-t-sm m-b-sm"><img src="http://img1.imgtn.bdimg.com/it/u=2609960718,3327286517&fm=27&gp=0.jpg"
                data-preview-src="http://img1.imgtn.bdimg.com/it/u=2609960718,3327286517&fm=27&gp=0.jpg"
                data-preview-group="3"></p>
                    <p class="text-mini zan-p mui-text-right"><span class="iconfont icon-yizan"></span> 20</p>
                </div>
            </div>
        </div>
    </div>
    <div class="liveroom-danmu">
        <ul>
            <li class="clearfix"><a href="#commentPopover" title=""><img src="../images/touxiang.jpg" class="img-circle" /><p>老师，什么时候开课啊</p></a></li>
            <li class="clearfix"><a href="#commentPopover" title=""><img src="../images/touxiang.jpg" class="img-circle" /><p><span class="l_wen">问</span>老师，什么时候开课啊老师，什么时候开课啊老师，什么时候开课啊</p></a></li>
            <li class="clearfix"><a href="#commentPopover" title=""><img src="../images/touxiang.jpg" class="img-circle" /><p>老师，什么时候开课啊</p></a></li>
        </ul>
    </div>
    <div class="liveroom-bottom mui-bar mui-bar-tab mui-live-tab">
        <div class="b_input rel">
            <input type="" name="" id="outInput" placeholder="来说点什么吧">
            <div class="mui-input-row mui-checkbox mui-left abs">
                <label>提问</label>
                <input name="checkbox" value="0" type="checkbox">
            </div>
        </div>
        <p class="b_icon b_btns abs">
            <a href="#menuPopover" title=""><span class="iconfont icon-gengduo" id="menubtn"></span></a>
            <a href="#commentPopover" title=""><span class="iconfont icon-daipingjia" id="commentbtn" href=""></span></a>
            <span class="iconfont icon-danmu" id="danmubtn"></span>
        </p>
        <p class="b_icon b_btn abs">
            <button type="" class="sendbtn">发送</button>
        </p>
    </div>
    <div id="commentPopover" class="mui-popover large-popover comment-popover">
        <div class="text-14 color-666 pop-top">讨论（500） <a href="#commentPopover" class="iconfont icon-xia-copy mui-pull-right"></a></div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <img class="mui-media-object mui-pull-left img-circle" src="../images/touxiang.jpg">
                <div class="mui-media-body">
                    <p class="text-14 color-666">用户名称</p>
                    <p class="text-mini color-999">2014-02-20 10:00:00</p>
                    <p class="color-333 text-15 m-t-sm"><span class="l_wen">问</span>报名参加</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <img class="mui-media-object mui-pull-left img-circle" src="../images/touxiang.jpg">
                <div class="mui-media-body">
                    <p class="text-14 color-666">用户名称</p>
                    <p class="text-mini color-999">2014-02-20 10:00:00</p>
                    <p class="color-333 text-15 m-t-sm"><span class="l_wen">问</span>报名参加报名参加报名参加报名参加报名参加报名参加报名参加报名参加</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <img class="mui-media-object mui-pull-left img-circle" src="../images/touxiang.jpg">
                <div class="mui-media-body">
                    <p class="text-14 color-666">用户名称</p>
                    <p class="text-mini color-999">2014-02-20 10:00:00</p>
                    <p class="color-333 text-15 m-t-sm">报名参加</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <img class="mui-media-object mui-pull-left img-circle" src="../images/touxiang.jpg">
                <div class="mui-media-body">
                    <p class="text-14 color-666">用户名称</p>
                    <p class="text-mini color-999">2014-02-20 10:00:00</p>
                    <p class="color-333 text-15 m-t-sm">报名参加</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-media">
                <img class="mui-media-object mui-pull-left img-circle" src="../images/touxiang.jpg">
                <div class="mui-media-body">
                    <p class="text-14 color-666">用户名称</p>
                    <p class="text-mini color-999">2014-02-20 10:00:00</p>
                    <p class="color-333 text-15 m-t-sm">报名参加</p>
                </div>
            </li>
        </ul>
        <div class="liveroom-bottom mui-bar mui-bar-tab mui-live-tab">
            <div class="b_input rel">
                <input type="" name="" placeholder="加入一起讨论">
                <div class="mui-input-row mui-checkbox mui-left abs">
                    <label>提问</label>
                    <input name="checkbox" value="0" type="checkbox">
                </div>
            </div>
            <p class="b_icon abs">
                <button type="" class="sendbtn">发送</button>
            </p>
        </div>
    </div>
    <div id="menuPopover" class="mui-popover large-popover menu-popover text-15 color-666">
        <div class="text-15 color-333 pop-top mui-text-center">操作<a href="#menuPopover" class="iconfont icon-xia-copy mui-pull-right"></a></div>
        <ul class="mui-table-view m-t">
             <li class="mui-table-view-cell"><a href="#" title=""><span class="iconfont icon-sh"></span>回顶部</a></li>
             <li class="mui-table-view-cell"><a href="#" title=""><span class="iconfont icon-xx"></span>回底部</a></li>
        </ul>
        <ul class="mui-table-view m-t">
             <li class="mui-table-view-cell"><a href="#" title=""><span class="iconfont icon-xiangmujieshao"></span>直播简介</a></li>
        </ul>
        <ul class="mui-table-view m-t">
             <li class="mui-table-view-cell"><a href="#" title=""><span class="iconfont icon-star-n"></span>收藏</a></li>
             <li class="mui-table-view-cell"><a href="#" title=""><span class="iconfont icon-jubao"></span>举报</a></li>
             <li class="mui-table-view-cell"><a href="#" title=""><span class="iconfont icon-fanhui1"></span>返回个人中心</a></li>
        </ul>
    </div>
</div>
<!-- <div class="tipPop mui-text-center">
    <div class="close-tip"><i class="iconfont icon-cuo"></i></div>
    <img src="http://resources-user-image.vxue360.com/3265dafb7500ab8594c47fd83075f20f.png?imageMogr2/thumbnail/128x128!" class="img-circle touxiang">
    <p class="text-18 color-black m-t m-b">打赏某某</p>
    <p class="t_line"><span><i class="iconfont icon-dashang"></i></span></p>
    <ul class="num-list clearfix">
        <li data-num="2">2元</li>
        <li data-num="5">5元</li>
        <li data-num="10">10元</li>
        <li data-num="20">20元</li>
        <li data-num="50">50元</li>
        <li data-num="100">100元</li>
    </ul>
    <p class="otherNum">其他金额</p>
    <div class="bottom">
    </div>
</div> -->
<!-- <div class="otherNumPop mui-text-center">
    <div class="close-tip"><i class="iconfont icon-cuo"></i></div>
    <p class="text-14 color-333">其他金额</p>
    <div class="o_input color-333">
        <p>金额(元): <input type="text" id="otherMoney" placeholder="可填写2-1000元" name=""></p>
    </div>
    <button>确定</button>
    <div class="bottom">
    </div>
</div> -->
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script src="../../Public/libs/swiper-3.4.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../../Public/libs/mui.zoom.js"></script>
<script src="../../Public/libs/mui.previewimage.js" charset="utf-8"></script>
<script src="../../Public/libs/layer/layer.js" charset="utf-8"></script>
<link src="../../Public/libs/layer/need/layer.css" rel="stylesheet">
<script type="text/javascript">
    mui.previewImage();
    mui('.mui-bar-tab').on('tap','a',function(){
        location.href = this.getAttribute('href');
    })
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationType: 'fraction'
    });
    $(function(){
        $('.liveroom-main').on('click','.chat-audio .iconfont',function(){
            var a_time = 38;
            var $this = $(this),
                $a_line = $this.siblings('.a_line'),
                $i = $a_line.find('i');
            $i.css('width',0);
            // $a_line.css('width',a_time*2);
            var per_go = 100/a_time, wid = 0;
            per_go = parseFloat(per_go.toFixed(2));
            $this.removeClass('icon-bofang').addClass('icon-zanting');
            var time1 = setInterval(function(){
                if(wid<100){
                    wid = wid + per_go;
                    $i.css({
                        width: wid + '%'
                    });
                    // $i.animate({width:wid+'%'});
                }else{
                    clearInterval(time1);
                    $this.addClass('icon-bofang').removeClass('icon-zanting');
                }
            },1000);
        })
        var hei = $(window).height();
        $('#commentPopover').css('height',hei*0.8);
        $('#commentPopover') .find('.pop-top').css('top',hei*0.2);
        // var lay1,lay2;//layer弹出层
        $('.liveroom-main').on('click','.tip_btn',function(){
            var str = `<div class="tipPop mui-text-center">
                    <div class="close-tip"><i class="iconfont icon-cuo"></i></div>
                    <img src="http://resources-user-image.vxue360.com/3265dafb7500ab8594c47fd83075f20f.png?imageMogr2/thumbnail/128x128!" class="img-circle touxiang">
                    <p class="text-18 color-black m-t m-b">打赏某某</p>
                    <p class="t_line"><span><i class="iconfont icon-dashang"></i></span></p>
                    <ul class="num-list clearfix">
                        <li data-num="2">2元</li>
                        <li data-num="5">5元</li>
                        <li data-num="10">10元</li>
                        <li data-num="20">20元</li>
                        <li data-num="50">50元</li>
                        <li data-num="100">100元</li>
                    </ul>
                    <p class="otherNum">其他金额</p>
                    <div class="bottom">
                    </div>
                </div>`;
            //自定页
            lay1 = layer.open({
              type: 1,
              skin: 'tipPop', //样式类名
              closeBtn: 1, //不显示关闭按钮
              anim: 2,
              shadeClose: true, //开启遮罩关闭
              content: str
            });
        });
        $('body').on('click','.close-tip',function(){
            layer.close(layer.index);
        });
        $('body').on('click','.num-list li',function(){

        })
        $('body').on('click','.otherNum',function(){
            var str = `<div class="otherNumPop mui-text-center">
                <div class="close-tip"><i class="iconfont icon-cuo"></i></div>
                <p class="text-14 color-333">其他金额</p>
                <div class="o_input color-333">
                    <p>金额(元): <input type="text" id="otherMoney" placeholder="可填写2-1000元" name=""></p>
                </div>
                <button>确定</button>
                <div class="bottom">
                </div>
            </div>`;
            lay2 = layer.open({
              type: 1,
              skin: 'tipPop', //样式类名
              closeBtn: 1, //不显示关闭按钮
              anim: 2,
              shadeClose: true, //开启遮罩关闭
              content: str
            });
        })
        $('#topShow').on('click',function(){
            $('.liveroom_stop').toggle();
            if($('.liveroom_stop').is(':hidden')){
                $('.liveroom-main').css('padding-top','53px');
                $(this).text('展开');
            }else{
                $('.liveroom-main').css('padding-top','253px');
                $(this).text('收起');
            }
        });
        $('#danmubtn').on('click',function(){
            $('.liveroom-danmu').toggle();
            $(this).toggleClass('icon-danmu icon-danmuguan');
        });
        $('#outInput').focus(function(){
            $('.b_btns').hide();
            $('.b_btn').show();
        }).blur(function() {
            $('.b_btns').show();
            $('.b_btn').hide();
        });
    })
</script>
</html>
